<template>
<!-- 	<view class="ani" :style="{
		'background-image':'url(' + $util.img(image) + ')'
	}"> -->
	<view class="ani">
		<view class="item">
			<view class="box box1">
				<image class="img1" :src="$util.img('/static/img/card/1.png')" mode="heightFix"></image>
				<image class="img1" :src="$util.img('/static/img/card/1.png')" mode="heightFix"></image>
			</view>
		</view>
		<view class="item ">
			<view class="box box2">
				<image class="img1" :src="$util.img('/static/img/card/2.png')" mode="heightFix"></image>
				<image class="img1" :src="$util.img('/static/img/card/2.png')" mode="heightFix"></image>
			</view>
		</view>
		<view class="item ">
			<view class="box box3">
				<image class="img1" :src="$util.img('/static/img/card/3.png')" mode="heightFix"></image>
				<image class="img1" :src="$util.img('/static/img/card/3.png')" mode="heightFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			image:{
				type:String,
				default:''
			}
		},
		data() {
			return {}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.ani {
		z-index: 1;
		opacity: .6;
		height: 672rpx;
		background-repeat:no-repeat;
		background-size: 100% 100%;
		.item {
			position: relative;
			height: 224rpx;

			.box {
				height: 224rpx;
				position: absolute;
				top: 0;
				display: flex;
				align-items: center;
				image {
					height: 100%;
				}
			}
			.box1 {
				left: 0;
				animation: ani 4s linear infinite alternate;
			}
			.box2 {
				left: -84rpx;
				animation: ani1 4s linear infinite alternate;
			}
			.box3 {
				left: -190rpx;
				animation: ani2 4s linear infinite alternate;
			}
		}
	}
	@keyframes ani{
		0%{
			left: 0;
		}
		100%{
			left: -400rpx;
		}
	}
	@keyframes ani1{
		0%{
			left: -348rpx;
		}
		100%{
			left: 20rpx;
		}
	}
	@keyframes ani2{
		0%{
			left: -96rpx;
		}
		100%{
			left: -340rpx;
		}
	}
</style>